<template>
  <div class="grid-content" @click="goDetail">
    <el-card :body-style="{ padding: '0px' }" class="curriculum-list">
      <img :src="data.cover" class="image" />
      <div style="padding: 14px;">
        <span class="kechengtitle">{{data.title}}</span>
        <p class="time">主讲：{{data.real_name}}</p>
        <div class="bottom">
          <time class="time" v-if="showDate">
            <i class="el-icon-date"></i>
            {{data.start_at}}
          </time>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  props: ["data", "showDate"],
  methods: {
    goDetail() {
      this.$axios
        .post("/openclass/details", {
          course_id: this.data.id
        })
        .then(res => {
          if (res.code == 200) {
            var isWin =
              navigator.platform == "Win32" || navigator.platform == "Windows";
            var isMac =
              navigator.platform == "Mac68K" ||
              navigator.platform == "MacPPC" ||
              navigator.platform == "Macintosh" ||
              navigator.platform == "MacIntel";
            if (isMac) {
              window.open(res.protocolMac);
            } else {
              window.open(res.protocol);
            }
          }
        });
    }
  }
};
</script> 
<style scoped lang='less'>
.grid-content {
  cursor: pointer;
}
.curriculum-list {
  margin-bottom: 20px;
  .kechengtitle {
    color: #484848;
    font-size: 16px;
    line-height: 32px;
  }
  .time {
    font-size: 14px;
    color: #999;
  }
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.image {
  width: 100%;
  display: block;
}
</style>
